<script setup lang="ts">
/* eslint-disable no-console */
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
import type { DictApi, QctemplateApi, TeamApi } from '#/api';

import { reactive, ref, watchEffect } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { addTeammember, DictResp, getTeammemberList } from '#/api';
import { getToolBarBtns, setToolBarBtnDefaultDisabled } from '#/utils';
import chargeModal from '#/utils/view/user/chargeModal.vue';

import { messageSuccess } from '../../../wm/common/common';

const props = defineProps(['team']);
const teamId = props.team;
watchEffect(() => {});
const mes_index_type = reactive<DictApi.SelectOption[]>([]);
DictResp(['mes_index_type']).then((res) => {
  console.log(res);

  // 将两个数组合并
  if (res.mes_index_type) {
    mes_index_type.push(...res.mes_index_type);
  }
});
// 存储选中行的响应式变量
const selectedRows = ref<QctemplateApi.Row1[]>([]);

const [Teammember, editmodalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: chargeModal,
  destroyOnClose: true,
  async onClosed() {
    const member = editmodalApi.getData();
    const teammember: TeamApi.TeammemberParams = {
      nickName: '',
      teamId: 0,
      tel: '',
      userId: 0,
      userName: '',
    };
    teammember.userId = member.userId;
    teammember.tel = member.tel;
    teammember.userName = member.userName;
    teammember.userId = member.userId;
    teammember.teamId = teamId;

    try {
      await addTeammember(teammember);
      refreshGrid('新增成功');
      editmodalApi.close();
    } finally {
      editmodalApi.lock(false);
    }
  },
});

// 表格左上角按钮
const buttons = getToolBarBtns();
const index1 = buttons.value.findIndex((item) => item.code === 'myDel'); // 找到 id=2 的索引
if (index1 !== -1) {
  buttons.value.splice(index1, 1); // 删除匹配的项
}
const index2 = buttons.value.findIndex((item) => item.code === 'myEdit'); // 找到 id=2 的索引
if (index2 !== -1) {
  buttons.value.splice(index2, 1); // 删除匹配的项
}
const gridEvents: VxeGridListeners = {
  toolbarButtonClick({ code }) {
    console.log(code);
    switch (code) {
      case 'myAdd': {
        // console.log(templateId);

        // 新增逻辑
        console.log('新增');
        editmodalApi.open();
        break;
      }
      default: {
        break;
      }
    }
  },
  checkboxChange({ records }) {
    selectedRows.value = records;
    setToolBarBtnDefaultDisabled(buttons, records.length);
  },
  checkboxAll({ records }) {
    selectedRows.value = records;
    setToolBarBtnDefaultDisabled(buttons, records.length);
  },
};

const gridOptions = reactive<VxeGridProps<TeamApi.Row1>>({
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    {
      align: 'left',
      field: 'userId',
      title: '',
      type: 'checkbox',
      width: 50,
    },
    { field: 'userName', title: '用户名' },
    { field: 'nickName', title: '用户昵称' },
    { field: 'tel', title: '电话' },
    { fixed: 'right', title: '操作' },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const res = await getTeammemberList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          teamId: teamId as any,
        });
        return {
          total: res.total,
          items: res.rows,
        };
      },
    },
  },

  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
    refresh: true,
    buttons: buttons.value,
  },
});

// 获取弹框中物料产品表格
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
  gridEvents,
});

function refreshGrid(msg: string) {
  messageSuccess(msg);
  gridApi.query();
}
</script>

<template>
  <div>
    <Teammember @success="refreshGrid" />
    <Grid />
  </div>
</template>
